<div class="default-background">
    <h2 class="flex-row-space-between">{{'PENDING_SUB_REQUEST' |translate}}</h2>
    <div class="table-container">
        <table mat-table [dataSource]="tableSource.dataSource">

            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef> {{columnList['id']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.id"></app-copy-field>
                </td>
            </ng-container>

            <ng-container matColumnDef="projectName">
                <th mat-header-cell *matHeaderCellDef> {{columnList['projectName']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.projectName"></app-copy-field>
                </td>
            </ng-container>

            <ng-container matColumnDef="endpointName">
                <th mat-header-cell *matHeaderCellDef> {{columnList['endpointName']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.endpointName"></app-copy-field>
                </td>
            </ng-container>

            <ng-container matColumnDef="replenishRate">
                <th mat-header-cell *matHeaderCellDef> {{columnList['replenishRate']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    {{row.replenishRate}}
                </td>
            </ng-container>

            <ng-container matColumnDef="burstCapacity">
                <th mat-header-cell *matHeaderCellDef> {{columnList['burstCapacity']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    {{row.burstCapacity}}
                </td>
            </ng-container>
            <ng-container matColumnDef="approve">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['approve']|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="approve(row.id)" [color]="'primary'">done
                    </mat-icon>
                </td>
            </ng-container>
            <ng-container matColumnDef="reject">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['reject']|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="reject(row.id)" [color]="'warn'">close</mat-icon>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
        </table>
    </div>

    <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount"
        [pageIndex]="tableSource.pageNum" [pageSize]="tableSource.pageSize"
        (page)="tableSource.loadPage($event.pageIndex)">
    </mat-paginator>
</div>